리퀴드 글래스 분석

애플이 WWDC2025에서 새 디자인 언어인 리퀴드 글래스(Liquid Glass)를 발표했다. 유리(glass)처럼 보이지만 액체처럼 유동성이 있다는(liquid) 뜻이다. 개발자용 베타 버전을 직접 설치해보고 WWDC2025에서 공개된 관련 자료들도 찾아보며 공부를 조금 해봤다.

요약: 좋은 기획이지만 아직 구현이 제대로 되지 않은 걸로 보인다. 첫번째 개발자 베타 버전이니까 좀 더 기다려보면 좋을 것 같다.

겉모습

정지된 화면만 보면 2000년에 선보였던 아쿠아 UI와 유사하다. 다만 아쿠아가 (“물aqua”을 뜻하는 이름과 달리) 사탕처럼 딱딱한 느낌이었다면, 리퀴드 글래스는 실제 물방울처럼 부드럽고 쫀쫀하고 유동적인 느낌이다. 아쿠아 UI와 달리 리퀴드 글래스는 물방울 렌즈에 의한 빛의 굴절 효과 등을 매우 실제적으로 구현하고 있는 점도 눈에 띈다.

하지만 사용자 인터페이스를 분석하는 맥락에서 겉모습이 어떠한지를 따지는 건 부차적이다. 어떤 의도 또는 기획으로 이런 디자인 언어를 설계했는지, 기획이 적절한지, 기획에 맞게 잘 구현이 되었는지를 살펴보는 게 좋다.

논리

내가 본 자료 중에서는 WWDC2025의 세션 중 하나인 “Meet Liquid Glass”가 새 디자인 언어의 기획 의도를 가장 상세하게 알려주고 있었다.

하드웨어와 소프트웨어 경계를 허물기

요즘 하드웨어들의 디스플레이의 모서리가 곡선 형태다. UI 요소가 물방울처럼 동글동글하면 아래 그림과 같이 1) 디바이스의 모서리, 2) 디스플레이 패널의 모서리, 3) 소프트웨어 UI 영역의 모서리를 모두 동심원으로 미려하게 표현할 수 있다.

단, 개발자 Beta 1에서는 중첩된 요소의 곡면이 동심원이 아닌 경우가 많아서 심미성이 심하게 떨어진다. 아마 아직 덜 다듬어졌기 때문인 것 같다.

콘텐츠를 완전히 가리지 않으면서도 경계를 직관적으로 인식할 수 있도록 하기

유리나 물방울은 투명하기 때문에 콘텐츠를 완전히 가리지 않으면서도 빛의 굴절 등에 의해 콘텐츠 위에 액체가 있다는 사실을 시각적으로 쉽게 알릴 수 있다. 액체의 렌즈 효과는 실제 세상에서 흔하게 볼 수 있기에 누구에게나 익숙하다. 따라서 누구나 이해할 수 있는 본능적인 시각적 힌트(instinctive visual cues) 역할을 한다.

특히 물방울 렌즈의 가장자리에서 일어나는 빛의 굴절이 일종의 테두리 역할을 하기 때문에 자연스럽게 배경과 전경을 쉽게 구분할 수 있다. 다만, 아래 그림과 같이 테두리가 예쁘게 그려지는 배경도 있지만, 어떤 배경 위에서는 테두리가 아주 못생겨보이는 문제가 있다. 예를 들어 검은색 단색 배경 위에 리퀴드 글래스 요소를 올리면 예쁘지가 않다.

인터랙션에 자연스럽게 반응하기

인터랙션 중 리퀴드 글래스 요소가 사용자 얼굴 방향으로 가까이 “떠오를” 수 있다. (터치하면 눌려서 들어가는 게 아니라 손가락 방향으로 다가온다는 점은 구글의 머티리얼 디자인과 유사하다. 머티리얼 디자인의 초기 메타포는 “마법 같은 종이”였다.)

게다가 투명하기 때문에 아래의 프로그레스 바 예시처럼 더 정확한 조작을 가능케 해준다.

다만 테두리 부분에서 발생하는 굴절을 지나치게 사실적으로 구현하는 바람에 주의를 분산시키는 문제가 있다. 아래와 같이 터치 스크린에서 텍스트를 선택할 때가 특히 문제다.

맥락에 따른 자연스러운 변형

화면이 전환될 때 내비게이션 요소나 플로팅 요소가 맥락에 따라 바뀌는 경우가 많은데, 이런 상황에서 리퀴드 글래스 요소는 자연스럽게 형태를 변형시킬 수 있다. 이렇게 하면 각 화면별로 별개의 콘트롤 패널이 있다는 느낌 대신 단일한 콘트롤 패널이 맥락에 맞게 유기적으로 변한다는 개념을 표현할 수 있다. 햄버거 버튼을 클릭했을 때 버튼이 부드럽게 메뉴로 전환되는 효과도 동일한 방식으로 표현 가능하다.

아래 그림은 화면이 이동되면서 새로운 콘트롤들이 부드럽게 나타나는 트랜지션 과정을 보여줌. 하나의 리퀴드 글래스 요소가 두 개의 요소로 갈라지는 순간.

접근성과 사용성

리퀴드 글래스 요소는 여러 레이어로 구성되는데 각 레이어가 맥락에 따라 동적으로 변한다. 위 영상 중에서 언급된 레이어들은 아래와 같다. (“Glowing layer”는 명시적으로 이름을 알려주지 않아서 내가 임의로 지었다. 나머지 레이어 이름은 영상 중에서 언급한 이름을 그대로 사용)

• Highlight layer: 물방울 렌즈의 가장자리의 굴절 효과를 표현하는 레이어. 리퀴드 글래스 요소의 테두리를 자연스럽게 드러내는 기능.
• Shadow layer: 리퀴드 글래스 요소 아래에 어떤 콘텐츠가 있는지에 따라 자동으로 투명도가 조정되는 그림자 레이어. 텍스트 위에 놓이면 그림자가 진해지고 깨끗한 배경 위에 놓이면 그림자가 연해진다. 리퀴드 글래스 요소가 어떠한 맥락에서도 눈에 적절히 잘 띄도록 만드는 기능.
• Glowing layer: 리퀴드 글래스 요소를 클릭하거나 터치하면 자체적으로 빛을 내뿜는 레이어. 구글 머티리얼 디자인과 유사하게, 사용자가 터치한 지점을 중심으로 빛이 퍼져나가는 효과를 구현했다. 인터랙션에 대한 즉각적인 피드백을 제공하는 기능.
• Dimming layer: 리퀴드 글래스 요소가 놓여있는 배경에 따라 흰색 또는 검정색으로 적응적으로 바뀌는 레이어. 이 레이어의 색이 무엇인지에 따라 글래스 위에 놓인 심볼의 색상도 반전된다(흰색이면 검정, 검정이면 흰색으로). 리퀴드 글래스 요소의 시인성을 높이는 기능.

그 외에도 각 레이어는 고대비 모드, 모션 줄이기 등 다양한 접근성 요구사항에 맞춰 자동으로 적응된다.

다만 개발자 Beta 1에서는 Dimming Layer의 색상 전환이 좀 투박하게 구현되어 있어서 리퀴드 글래스 요소가 불필요하게 자주 깜빡거리는 산만한 느낌을 준다. 아래는 사파리의 사례. Dimming Layer가 흰색으로 바뀌는 순간 “번쩍”하고 변하면서 시선을 끌어당긴다. 깜빡임은 움직임으로 간주되어 안구 이동 계획에 영향을 준다. 주변시에 깜빡임이 감지되면 눈동자를 강제로 잡아끌게 된다.

언제 써야하나

위 영상에서는 리퀴드 글래스 요소를 모든 곳에 적용해서는 안된다고 말한다. 내비게이션 레이어에서 쓰는 게 가장 좋으며, 글래스 위에 글래스가 겹치는 상황은 피하라고 안내하고 있다.

스큐어모피즘의 귀환인가

혹자는 리퀴드 글래스 디자인이 스큐어모피즘의 귀환이라며 비판하는데, 다음 사항들을 고려할 필요가 있다.

• 스큐어모피즘의 장점과 단점은 무엇이었나?
• 애플은 2013년 발표한 iOS 7에서 왜 스큐어모피즘을 포기했나?
• 리퀴드 글래스의 어떤 면이 스큐어모피즘의 단점에 해당하나?

스큐어모피즘의 장점 중 하나는 현실 세계의 사물을 메타포로 활용하기 때문에 상대적으로 친숙하다는 점이다. 친숙함은 곧 배우기 쉽다는 뜻이고 이는 사용성의 중요한 축이다. (다른 중요한 축 중 하나는 “사용하기 쉬움”)

스큐어모피즘의 단점 중 하나는 스큐어모픽 디자인을 “유연하게” 만들려면 손이 많이 간다는 점이다. 스큐어모픽 디자인을 다양한 형태의 디바이스에 맞추는 가장 쉬운 방법은 나인패치(nine-patch; 디자인을 가로 3칸, 세로 3칸의 격자로 나누고 네 개의 모서리는 고정, 중앙 블록과 네 개의 면은 가변적으로 늘어날 수 있도록 하는 방식)인데, 이 방식은 손이 많이 갈 뿐 아니라 중앙 블록과 네 개의 면을 어떻게든 가변적으로 만들어야 하기 때문에(타일링 가능하거나 잡아 늘릴 수 있어야 함) 표현 상에도 여러 한계가 있다.

이 단점은 2013년에 애플조차 스큐어모피즘에서 플랫 디자인으로의 전환하게 만든 큰 요인 중 하나였다고 본다. 아이폰과 아이패드의 폼팩터가 더이상 버틸 수 없을만큼 다양해졌기 때문. 반면, 플랫 디자인은 기하학적인 요소 위주로 구성되기 때문에 다양한 폼팩터에 쉽게 적응할 수 있다. 다양한 폼팩터를 지원해야 하는 플랫폼들이 상대적으로 먼저(2000년대 중반) 플랫 디자인을 도입한 이유이기도 할 것.

또다른 단점은 아무런 기능적 이점도 없이 (또는 기능적 단점이 있음에도 불구하고) 현실의 사물을 지나치게 그대로 모방하는 경우가 많다는 점이다.

다만, 현실의 사물과 유사한 점이 있기만 하면 무조건 스큐어모피즘이라고 비판하는 경우도 있는데 이는 잘못이다. 그림자가 대표적인 사례다. iOS 7은 스큐어모피즘에서 지나치게 많이(?) 벗어나려고 노력한 탓인지 그림자까지 없애버렸는데, 그 결과 사용성도 떨어졌다. 2014년 구글 머티리얼 디자인이 그림자의 역할을 크게 강조한 점과 대비된다. 그림자에는 분명한 기능적 이점이 있다는 점에서 UI 요소에 그림자를 적절히 활용하는 건 스큐어모피즘과 무관하다. 인간의 눈과 뇌에는 명암이나 텍스쳐 등 그림자로부터 유용한 정보를 추출하는 특화된 적응 메커니즘들이 있다.

그러면 리퀴드 글래스는 유리 또는 물방울이라는 현실 세계의 물질을 모방하면서도 스큐어모피즘의 장점은 취하고 단점은 버렸는지, 그러면서 동시에 플랫 디자인만큼의 유연성을 가지고 있는지를 생각해보면 좋겠다.

• 물방울 렌즈의 가장자리에서 빛이 심하게 굴절되는 현상을 모방해서 “테두리”라는 기능을 취한 건 잘한 것 같다. 다만 빛의 굴절을 지나치게 그대로 묘사하여 오히려 눈을 산만하게 만든 점은 과거 스큐어모피즘의 단점을 답습한 실수로 보인다.
• 과거 스큐어모픽 디자인이 현실의 사물을 “비트맵” 이미지로 구현한 것과 달리 실시간 렌더링을 한다는 점에서 과거와 달리 다양한 폼팩터에 유연하게 적응할 수 있다는 점은 장점이다.
• 그 외에 여러 문제점들은 기획이 아닌 실행의 문제로 보인다. 정식 버전이 나오면 상당히 다듬어지길 기대해본다.